<% layout('boilerplate') -%>
<link rel="stylesheet" href="/lib/swiper/css/swiper.min.css" />
<link rel="stylesheet" href="/lib/iconfont.css" />
<link rel="stylesheet" href="<%= linkPath %>/css/company.css" />
<link rel="stylesheet" href="<%= linkPath %>/css/companyResponsive.css" />
<script type="text/javascript" src="/lib/swiper/js/swiper.min.js"></script>
<script type="text/javascript" src="/lib/swiper/js/swiper.animate1.0.3.min.js"></script>
<script type="text/javascript" src="<%= linkPath %>/js/company.js"></script>
<script type="text/javascript"
        src="http://webapi.amap.com/maps?v=1.4.5&key=9ffe42e17300a715aebd32d0ba66b55a">
</script>
<!-- banner-swiper 公司首页banner-->
<div id="home" class="container-fluid">
    <div class="row">
        <div class="banner-swiper banner-swiper-container swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"
                     style="background-image: url('<%= linkPath %>/images/company/company-banner-1.jpg')">
                    <div class="swiper-cont">
                        <div class="text-cont">
                            <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
                               swiper-animate-delay="0.3s">引爆 “颜值经济”</p>
                            <p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s"
                               swiper-animate-delay="0.3s">实现全民变美梦想</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-lazy"
                     data-background="<%= linkPath %>/images/company/company-banner-2.jpg">
                    <div class="swiper-lazy-preloader"></div>
                    <div class="swiper-cont">
                        <div class="text-cont">
                            <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
                               swiper-animate-delay="0.3s">点燃青春的激情</p>
                            <p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s"
                               swiper-animate-delay="0.3s">凝聚团队的力量</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-lazy"
                     data-background="<%= linkPath %>/images/company/company-banner-3.jpg">
                    <div class="swiper-lazy-preloader"></div>
                    <div class="swiper-cont">
                        <div class="text-cont">
                            <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
                               swiper-animate-delay="0.3s">心有多大 舞台就有多大</p>
                            <p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s"
                               swiper-animate-delay="0.3s">驻美科技 欢迎你的加入</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-lazy"
                     data-background="<%= linkPath %>/images/company/company-banner-4.jpg">
                    <div class="swiper-lazy-preloader"></div>
                    <div class="swiper-cont">
                        <div class="text-cont">
                            <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
                               swiper-animate-delay="0.3s">专业团队 为您服务</p>
                            <p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s"
                               swiper-animate-delay="0.3s">给您一个满意的答案</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Add Pagination -->
            <div class="banner-swiper-pagination swiper-pagination"></div>
        </div>

    </div>
</div>

<div class="tab-item">
    <!--公司介绍部分-->
    <div id="introduce" class="container-fluid">
        <!--关于我们-->
        <div class="about tab-item-cont">
            <h1 class="text-center">关于我们</h1>
            <div class="row">
                <div class="col-md-offset-2 col-sm-offset-1">
                    <div class="col-md-5 col-sm-11 col-xs-12 ab-item-parent">
                        <div class="ab-item-child" style="margin-bottom: 30px">
                            <p>上海驻美信息科技有限公司，旗下产品【优雅美学】是为客户提供专业的一站式服务的<b class="colorText">医美第三方平台</b>，以APP、公众号、PC
                                网站、移动网站的全方位立体式通道，
                                有效链接<b class="colorText">医院、医生、消费者三方</b>，通过全面的资质审查、安全的医美信息输出、高效的获客渠道等方式，同时满足求美者和医美机构的需求。</p>
                            <p>公司一直致力于以互联网和传统整形营销相结合的运营模式，在为客户供安全变美服务资讯途径的同时，也为医疗美容机构降低获客成本。
                            </p>
                        </div>
                    </div>
                    <div class="col-md-5 col-sm-11 col-xs-12 imgCont">
                        <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/about1.png" alt="公司介绍" style="width: 100%;">
                    </div>
                </div>
            </div>
            <div class="row" style="padding: 50px 0;">
                <div class="col-md-offset-2 col-sm-offset-1">
                    <div class="hidden-xs hidden-sm">
                        <div class="col-md-5 col-sm-11 col-xs-12 imgCont">
                            <img src="<%= linkPath %>/images/company/about2.jpg" alt="公司介绍" style="width: 100%;">
                        </div>
                        <div class="col-md-5 col-sm-11 col-xs-12 ab-item-parent">
                            <div class="ab-item-child">
                                <p>【优雅美学】（电商平台、咨询服务平台、客户服务中心）拥有全方位的医疗保障体系、精准高效的需求对接、平台极致的用户体验，已为数十万爱美人士在线提供了专业的<b
                                        class="colorText">电商、资讯、社交和咨询</b>服务。
                                </p>
                                <p>【优雅美学】始终坚持为爱美人士提供值得信赖的正规医美服务，通过打造一个全方位、立体式覆盖术前和术后的完善服务价值链，实现<b class="colorText">精准咨询与引流一体化</b>服务。
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="visible-xs visible-sm">
                        <div class="col-md-5 col-sm-11 col-xs-12 ab-item-parent">
                            <div class="ab-item-child" style="margin-bottom: 30px">
                                <p>【优雅美学】（电商平台、咨询服务平台、客户服务中心）拥有全方位的医疗保障体系、精准高效的需求对接、平台极致的用户体验，已为数十万爱美人士<b
                                        class="colorText">在线提供了专业的电商、资讯、社交和咨询服务。
                                </b></p>
                                <p>【优雅美学】始终坚持为爱美人士提供值得信赖的正规医美服务，通过<b class="colorText">打造一个全方位、立体式覆盖术前和术后的完善服务价值链</b>，实现精准咨询与引流一体化服务。
                                </p>
                            </div>
                        </div>
                        <div class="col-md-5 col-sm-11 col-xs-12 imgCont">
                            <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/about2.jpg" alt="公司介绍" style="width: 100%;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--企业文化-->
        <div class="enterprise" style="background-image: url('<%= linkPath %>/images/company/back.jpg');">
            <div class="row text-center wow fadeInUp" data-wow-duration="1500ms" data-wow-delay="100ms">
                <h1 class="text-center">以APP、公众号、PC 网站、移动网站的全方位立体式通道</h1>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p class="text-center wow fadeInUp" data-wow-duration="1500ms" data-wow-delay="100ms">
                        助力更多医美机构解决“获客难、获客贵、客户粘性不高”等问题，实现精准推送、专业服务</p>
                </div>
            </div>
            <div class="row imgWarp">
                <div class="col-md-4 col-xs-6 imgBox wow flipInX" data-wow-duration="1000ms" data-wow-delay="100ms">
                    <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/qiye1.png" alt="公司介绍">
                </div>
                <div class="col-md-4 col-xs-6 imgBox wow flipInX" data-wow-duration="1000ms" data-wow-delay="100ms">
                    <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/qiye2.png" alt="公司介绍">
                </div>
                <div class="col-md-4 col-xs-6 imgBox wow flipInX" data-wow-duration="1000ms" data-wow-delay="100ms">
                    <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/qiye3.png" alt="公司介绍">
                </div>
                <div class="col-md-4 col-xs-6 imgBox wow flipInX" data-wow-duration="1000ms" data-wow-delay="100ms">
                    <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/qiye4.png" alt="公司介绍">
                </div>
                <div class="col-md-4 col-xs-6 imgBox wow flipInX" data-wow-duration="1000ms" data-wow-delay="100ms">
                    <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/qiye5.png" alt="公司介绍">
                </div>
                <div class="col-md-4 col-xs-6 imgBox wow flipInX" data-wow-duration="1000ms" data-wow-delay="100ms">
                    <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/qiye6.png" alt="公司介绍">
                </div>
            </div>
        </div>
        <!--办公环境-->
        <div class="environment tab-item-cont">
            <h1 class="text-center">办公环境</h1>
            <div class="row content">
                <div class="col-xs-4 wow flipInX" data-wow-duration="1000ms" data-wow-delay="100ms">
                    <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/environment1.jpg" alt="办公环境" title="办公环境">
                </div>
                <div class="col-xs-4 wow flipInX" data-wow-duration="1000ms" data-wow-delay="100ms">
                    <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/environment2.jpg" alt="办公环境" title="办公环境">
                </div>
                <div class="col-xs-4 wow flipInX" data-wow-duration="1000ms" data-wow-delay="100ms">
                    <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/environment3.jpg" alt="办公环境" title="办公环境">
                </div>
            </div>
        </div>

        <!--加入我们-->
        <div class="join row" style="background-image: url('<%= linkPath %>/images/company/join-bac.jpg')">
            <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/join.png" alt="加入我们">
            <div class="wow fadeInUp btn-cont" data-wow-duration="1500ms" data-wow-delay="200ms">
                <div class="detail-btn hvrBtn hvr-bounce-to-right">
                    <a href="javascript:;">查看详情</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tab-item hide">
    <!--公司介绍部分-->
    <div class="container-fluid">
        <div id="staff" class="environment tab-item-cont">
            <h1 class="text-center staff-title">公司周年庆</h1>
            <div class="row">
                <div class="swiper-container staff-swiper-container wow zoomIn" data-wow-duration="1000ms"
                     data-wow-delay="100ms">
                    <div class="swiper-wrapper staff-cont">
                        <!-- 动态加入 -->
                        <div class="swiper-slide">
                            <img src="<%= linkPath %>/images/staff/staffItem1/item1-1.jpg" alt="公司周年庆">
                        </div>
                        <div class="swiper-slide">
                            <img src="<%= linkPath %>/images/staff/staffItem1/item1-2.jpg" alt="公司周年庆">
                        </div>
                        <div class="swiper-slide">
                            <img src="<%= linkPath %>/images/staff/staffItem1/item1-3.jpg" alt="公司周年庆">
                        </div>
                        <div class="swiper-slide">
                            <img src="<%= linkPath %>/images/staff/staffItem1/item1-4.jpg" alt="公司周年庆">
                        </div>
                        <div class="swiper-slide">
                            <img src="<%= linkPath %>/images/staff/staffItem1/item1-5.jpg" alt="公司周年庆">
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination staff-swiper-pagination"></div>
                </div>
            </div>

            <div class="row" style="margin-top: 30px">
                <div class="col-xs-3 staff-foot-item active">
                    <div class="wow flipInX" data-wow-duration="2000ms" data-wow-delay="100ms">
                        <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/staff/staffItem1/item1-1.jpg" alt="<%= altText %>">
                        <div class="mask">
                            <div class="text-box">
                                <p><span>01</span></p>
                                <p>公司周年庆</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-3 staff-foot-item">
                    <div class="wow flipInX" data-wow-duration="2000ms" data-wow-delay="100ms">
                        <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/staff/staffItem2/item2-1.jpg" alt="<%= altText %>">
                        <div class="mask">
                            <div class="text-box">
                                <p><span>02</span></p>
                                <p>员工风采</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-3 staff-foot-item">
                    <div class="wow flipInX" data-wow-duration="2000ms" data-wow-delay="100ms">
                        <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/staff/staffItem3/item3-1.jpg" alt="<%= altText %>">
                        <div class="mask">
                            <div class="text-box">
                                <p><span>03</span></p>
                                <p>慈善活动</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-3 staff-foot-item">
                    <div class="wow flipInX" data-wow-duration="2000ms" data-wow-delay="100ms">
                        <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/staff/staffItem4/item4-1.jpg" alt="<%= altText %>">
                        <div class="mask">
                            <div class="text-box">
                                <p><span>04</span></p>
                                <p>公司旅游</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="tab-item hide">
    <!--招贤纳士部分 recruit-->
    <div id="recruit" class="container-fluid">
        <div class="join row" style="background-image: url('<%= linkPath %>/images/company/join-bac.jpg')">
            <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/join.png" alt="加入我们">
        </div>
        <div class="row recruit-msg" style="padding:50px 0;background-color: #fff;">
            <div class="col-md-offset-2">
                <div class="col-md-3 col-sm-4 col-xs-6 text-center">
                    <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/iphone.png" alt="">
                    <p class="text-title text-center">应聘电话</p>
                    <p class="text-msg text-center">021-62950688</p>
                </div>
                <div class="col-md-3 col-sm-4 col-xs-6 text-center">
                    <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/email.png" alt="">
                    <p class="text-title text-center">应聘邮箱</p>
                    <p class="text-msg text-center">hr@yoya.cn</p>
                </div>
                <div class="col-md-3 col-sm-4 hidden-xs text-center">
                    <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/zhao.png" alt="">
                    <p class="text-title text-center">投递渠道</p>
                    <p class="text-msg text-center">可点击下方链接</p>
                </div>
            </div>
        </div>
        <div class="row hidden-xs" style="background-color: #FAFBFC;padding-bottom: 30px;">
            <div class="col-md-offset-2 col-sm-offset-2">
                <div class="col-md-3 col-sm-4"></div>
                <div class="col-md-3 col-sm-4"></div>
                <div class="col-md-3 col-sm-3 text-center">
                    <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/arr.png" alt="" style="margin-top:-1px;">
                </div>
            </div>
        </div>
        <!--招聘网站链接-->
        <div class="row recruit-link">
            <div class="col-md-offset-2">
                <div class="col-md-9 col-xs-12 link-item wow flipInX" data-wow-duration="1500ms" data-wow-delay="300ms">
                    <div class="col-xs-4 col-sm-3 text-center">
                        <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/link1.png" alt="">
                    </div>
                    <div class="link col-xs-8 col-sm-9">
                        <h3>51job应聘</h3>
                        <a href="https://jobs.51job.com/all/co4870045.html" target="_blank">https://jobs.51job.com/all/co4870045.html</a>
                    </div>
                </div>
                <div class="col-md-9 col-xs-12 link-item wow flipInX" data-wow-duration="1500ms" data-wow-delay="300ms">
                    <div class="col-xs-4 col-sm-3 text-center">
                        <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/link2.png" alt="">
                    </div>
                    <div class="link col-xs-8 col-sm-9">
                        <h3>智联应聘</h3>
                        <a href="http://company.zhaopin.com/CC637365438.html" target="_blank">http://company.zhaopin.com/CC637365438.html</a>
                    </div>
                </div>
                <div class="col-md-9 col-xs-12 link-item wow flipInX" data-wow-duration="1500ms" data-wow-delay="300ms">
                    <div class="col-xs-4 col-sm-3 text-center">
                        <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/link3.png" alt="">
                    </div>
                    <div class="link col-xs-8 col-sm-9">
                        <h3>猎聘应聘</h3>
                        <a href="https://www.liepin.com/job/1912160262.shtml" target="_blank">https://www.liepin.com/job/1912160262.shtml</a>
                    </div>
                </div>
                <div class="col-md-9 col-xs-12 link-item wow flipInX" data-wow-duration="1500ms" data-wow-delay="300ms">
                    <div class="col-xs-4 col-sm-3 text-center">
                        <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/link4.png" alt="">
                    </div>
                    <div class="link col-xs-8 col-sm-9">
                        <h3>58同城应聘</h3>
                        <a href="http://qy.58.com/54007403826449/?entinfo=33344379243317_3&PGTID=0d40ea51-018b-be2f-4961-007c06de2fe3&ClickID=7"
                           target="_blank">http://qy.58.com/54007403826449/?entinfo=33344379243317_3&PGTID=0d40ea51-018b-be
                            2f-4961-007c06de2fe3&ClickID=7</a>
                    </div>
                </div>
                <div class="col-md-9 col-xs-12 tips">
                    <p class="main-text"><span class="main-color">注：</span>如果您直接发送简历，请在邮件主题上注明：应聘职位+姓名</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="tab-item hide">
    <!--联系我们部分 contact-->
    <div id="contact" class="container-fluid" style="background-color: #FAFBFC;">
        <!--地图-->
        <div class="mapBox row">
            <div class="col-sm-offset-1 col-md-offset-2 col-sm-10 col-md-8">
                <div class="hidden-xs" style="background-color: #fff;height:412px;padding:10px;">
                    <div id="map-container" style="height:100%;"></div>
                </div>

                <div class="col-xs-12 col-sm-6 contact-item">
                     <div>
                         <div class="col-xs-3">
                             <img src="<%= linkPath %>/images/company/contact1.png" alt="">
                         </div>
                         <div class="col-xs-9 main-text">
                             <h3>机构合作</h3>
                             <p>联系人：吴女士</p>
                             <p>电话：021-62950688 </p>
                             <p>邮箱：wuxixi@yoya.cn</p>
                         </div>
                     </div>
                </div>
                <div class="col-xs-12 col-sm-6 contact-item">
                    <div>
                        <div class="col-xs-3">
                            <img src="<%= linkPath %>/images/company/contact2.png" alt="">
                        </div>
                        <div class="col-xs-9 main-text">
                            <h3>市场合作</h3>
                            <p>联系人：陈女士</p>
                            <p>电话：021-62950688 </p>
                            <p>邮箱：shunachen@yoya.cn</p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 contact-item">
                    <div>
                        <div class="col-xs-3">
                            <img src="<%= linkPath %>/images/company/contact3.png" alt="">
                        </div>
                        <div class="col-xs-9 main-text">
                            <h3>招贤纳士</h3>
                            <p>联系人：薛女士</p>
                            <p>电话：021-62950688 </p>
                            <p>邮箱：xueqiuqiu@yoya.cn</p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 contact-item">
                    <div>
                        <div class="col-xs-3">
                            <img src="<%= linkPath %>/images/company/contact4.png" alt="">
                        </div>
                        <div class="col-xs-9 main-text">
                            <h3>其他事宜</h3>
                            <p>联系人：吴女士</p>
                            <p>电话：021-62950688 </p>
                            <p>邮箱：wuxixi@yoya.cn</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="foot-nav hidden-xs">
    <div class="container">
        <a class="navbar-brand" href="/" title="优雅驻美整形">
            <h1><img class="lazy img-responsive" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/logo.png" alt="优雅美学logo"></h1>
        </a>
        <ul class="foot-nav-item">
            <li class="active">公司介绍</li>
            <li>员工风采</li>
            <li>招贤纳士</li>
            <li>联系我们</li>
        </ul>
        <div class="foot-nav-right pull-right">
            <span>
                <i class="iconfont icon-phone"></i>
            </span>
            <span>
                <i class="iconfont icon-weixin"></i>
            </span>
            <img class="leftImg lazy hide" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/andriod.png" alt="app安卓下载">
            <img class="rightImg lazy hide"  src="<%= lazySrc %>" data-original="<%= linkPath %>/images/company/gzh.png" alt="微信公众号">
        </div>
    </div>
</div>
<script>
    $(function () {
        var winWidth = $(window).width();
        $('img.lazy').lazyload(
            {
                threshold: 200,//滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
                effect: 'fadeIn',//show fadeIn slideDown
                //placeholder: '',//设置加载中的占位图片路径，如image.load.gif，个人建议不设置，可以通过css设置背景图片加提前设置src=reload.gif的方式，来达到图片正在加载中的效果
            }
        );
        if (winWidth > 991) {
            //关于我们图片和文字居中对齐
            function load(imgSrc, callback) {
                var imgs = [];
                var c = 0;
                for (var i = 0; i < imgSrc.length; i++) {
                    imgs[i] = new Image();
                    imgs[i].src = imgSrc[i];
                    imgs[i].onload = function () {
                        c++
                        if (c == imgSrc.length) {
                            if (callback) {
                                callback();
                            }
                        }
                    }
                }
                return imgs;
            }

            load(['<%= linkPath %>/images/company/about1.png', '<%= linkPath %>/images/company/about2.jpg'], function () {
                $('.imgCont').each(function (i, v) {
                    var minHeight = $(v).height();  //动态获取图片的生成的高度
                    //动态设置垂直居中容器的最小高度
                    $('.ab-item-parent').eq(i).css({'min-height': minHeight + 'px', 'position': 'relative'});
                })
                $('.ab-item-child').css({'position': 'absolute', 'top': '50%', 'transform': 'translateY(-50%)'});
            })
        }


        //员工风采
        var baseImgUrl = '<%= linkPath %>/images/staff/staffItem'
        var imgMap = [
            {text: '公司周年庆', imgLen: 5},
            {text: '员工风采', imgLen: 5},
            {text: '公司慈善', imgLen: 3},
            {text: '公司旅游', imgLen: 3},
        ];
        var getSlideItemStr = function (index, arrIndex, text) {
            return '<div class="swiper-slide">' +
                '<img src="' + baseImgUrl + (index + 1) + '/item' + (index + 1) + '-' + (arrIndex + 1) + '.jpg" alt="' + text + '">' +
                '</div>'
        }

        var getAllSlideStr = function (index) {
            var str = '';
            var text = imgMap[index].text;
            var len = imgMap[index].imgLen;
            for (var i = 0; i < len; i++) {
                str += getSlideItemStr(index, i, text)
            }
            return str;
        }
        var staffSwiper = new Swiper('.staff-swiper-container', {
            pagination: {
                el: '.staff-swiper-pagination',
                clickable: true,
            },
            lazy: {
                loadPrevNext: false
            }
        });

        $(document).on("click", ".staff-foot-item", function () {
            var idx = $(this).index();
            $(this).addClass('active').siblings().removeClass('active');
            staffSwiper.removeAllSlides();                        //删除所有sliders
            $('.staff-cont').empty().append(getAllSlideStr(idx)); //轮播内容更新html
            $('.staff-title').text(imgMap[idx].text);            //更新标题
            staffSwiper.update();                                // 更新初始
        })



    })
</script>
